<script setup>
import tabbar from '../components/tabbar.vue'
import home from '../components/home.vue'
import work from '../components/work.vue'
import { ref, onMounted } from 'vue'
const activeIndex = ref(0)
function getActiveIndex(index) {
    activeIndex.value = index
}
function handleScroll(e){
    console.log(e);
}
</script>

<template>
    <div class="index_container" @scroll="handleScroll">
        <Transition appear enter-active-class="animate__animated animate__slideInUp">
            <home :activeIndex="activeIndex" v-if="activeIndex == 0"></home>
        </Transition>
        <Transition appear enter-active-class="animate__animated animate__slideInUp">
            <KeepAlive v-if="activeIndex == 2">
                <work :activeIndex="activeIndex"  ></work>
            </KeepAlive>
        </Transition>
        <tabbar @activeIndex="getActiveIndex"></tabbar>
    </div>
</template>


<style scoped lang="scss">
.index_container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: #F4F0F0;
}
</style>